<html>
  <head>
    <title>vue3-context-menu test</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="./vue3-context-menu.css" />
  </head>
  <body>
    <script src="./vue3-context-menu.umd.js"></script>
    
    <div id="app">
      <div @contextmenu="onContextMenu($event)">{{ message }}</div>
    </div>
    
    <script>
      const { createApp } = Vue

      createApp({
        data() {
          return {
            message: 'Right click here to show contextmenu !'
          }
        },
        methods: {
          onContextMenu(e) {
            //prevent the browser's default menu
            e.preventDefault();
            //show our menu
            this.$contextmenu({
              items: [
                { 
                  label: 'Simple item',
                  onClick: () => alert('Click Simple item'),
                },
                {
                  label: "Sub menu Example",
                  children: [
                    {
                      label: "Back",
                      onClick: () => {
                        console.log("You click Back");
                      }
                    },
                    { label: "Forward", disabled: true },
                    { 
                      label: "Reload", 
                      divided: true, 
                      icon: "icon-reload-1",
                      onClick: () => {
                        alert("You click Reload");
                      }
                    },
                    { 
                      label: "Save as...",
                      icon: "icon-save",
                      onClick: () => {
                        alert("You click Save as");
                      }
                    },
                    { 
                      label: "Print...", 
                      icon: "icon-print",
                      onClick: () => {
                        alert("You click Print");
                      } 
                    },
                    { label: "View source", icon: "icon-terminal" },
                    { label: "Inspect" }
                  ],
                },
                {
                  label: "Submenu with Submenu",
                  children: [
                    {
                      label: "Very long submenu",
                      divided: true, 
                      children: [
                        { label: "Test1" },
                        { label: "Test2" },
                        { label: "Test3" },
                        { label: "Test4" },
                        { label: "Test5" },
                        { label: "Test6" },
                        { label: "Test7" },
                        { label: "Test8" },
                        { label: "Test9" },
                        { label: "Test10" },
                        { label: "Test11" },
                        { label: "Test12" },
                        { label: "Test13" },
                        { label: "Test14" },
                        { label: "Test15" },
                        { label: "Test16" },
                        { label: "Test17" },
                        { label: "Test18" },
                        { label: "Test19" },
                        { label: "Test20" },
                        { label: "Test21" },
                        { label: "Test22" },
                        { label: "Test23" },
                        { label: "Test24" },
                        { label: "Test25" },
                        { label: "Test26" },
                      ]
                    },
                    { 
                      label: "A submenu", 
                      children: [
                        { label: "Item1" },
                        { label: "Item2" },
                        { label: "Item3" },
                      ]
                    },
                    { 
                      label: "A submenu2", 
                      children: [
                        { label: "Item1" },
                        { label: "Item2" },
                        { label: "Item3" },
                        { 
                          label: "A submenu", 
                          children: [
                            { label: "Item1" },
                            { label: "Item2" },
                            { label: "Item3" },
                          ]
                        },
                      ]
                    },
                  ]
                },
              ],
              iconFontClass: 'iconfont',
              customClass: "class-a",
              zIndex: 3,
              minWidth: 230,
              x: e.x,
              y: e.y,
            });
          }
        },  
      })
      .use(window['vue3-context-menu'].default)
      .mount('#app')
    </script>
  </body>
</html>
